// 导入utils类
let utils = require('../../js/utils');

// echarts
import * as echarts from '../../components/ec-canvas/echarts';

let chartInstance;

function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  chartInstance = chart;
  canvas.setChart(chart);
  return chart;
}

Page({

  /**
   * 页面的初始数据
   */
  data: {
    ec: {
      onInit: initChart
    },

    // 骨架屏
    loading: true,

    // 显示时间
    date: '',

    // 选择时间
    selectDate: '',

    // 开始时间
    startDate: '',

    // 结束时间
    endDate: '',

    // 当前搜索类型
    searchIndex: 0,

    // 搜索类型
    searchData: [
      {title: '按年查询', type: 'n'},
      {title: '按月查询', type: 'y'}
    ],

    // 当前类型
    typeIndex: 0,
    
    // 记账类型
    type: [
      {title: '支出', type: 'zc', total: 0},
      {title: '收入', type: 'sr', total: 0}
    ],

    // 记录数据
    bookingdata: {
      zc: [],
      sr: []
    },

    // 饼图颜色
    colors: {
      zc: [],
      sr: []
    }
  },

  // 选择日期
  upInputData(e) {
    let date;
    if(this.data.searchIndex == 0) {
      date = utils.formatDate(new Date(e.detail.value), 'yyyy年');
    }else {
      date = utils.formatDate(new Date(e.detail.value), 'yyyy年MM月');
    }
    this.setData({
      date,
      selectDate: e.detail.value,
    })
    // 获取记录
    this.getBookingData();
  },

  // 切换搜索类型
  toggleSearch(e) {
    if(e.currentTarget.dataset.key == this.data.searchIndex) {
      return;
    }
    let date;
    if(e.currentTarget.dataset.key == 0) {
      date = utils.formatDate(this.data.selectDate, 'yyyy年');
    }else {
      date = utils.formatDate(this.data.selectDate, 'yyyy年MM月');
    }
    this.setData({
      date,
      searchIndex: e.currentTarget.dataset.key
    })
    // 获取记录
    this.getBookingData();
  },

  // 切换支出收入
  toggleType(e) {
    if(e.currentTarget.dataset.key == this.data.typeIndex) {
      return;
    }
    this.setData({
      typeIndex: e.currentTarget.dataset.key
    })
    this.drawPie();
  },

  // 获取记录数据
  getBookingData() {
    // 获取当前时间
    let currentDate = utils.formatDate(new Date(), 'yyyy-MM-dd').split('-');

    // 获取用户选择时间
    let userDate = this.data.selectDate.split('-');

    let startDate, endDate;

    // 按年查询____________________________
    if(this.data.searchIndex == 0) {
      startDate = `${userDate[0]}-01-01`;
      // 同年
      if(currentDate[0] == userDate[0]) {
        endDate = utils.formatDate(new Date(), 'yyyy-MM-dd');
      }else {
        // 不同年
        endDate = `${userDate[0]}-12-31`;
      }
      // 按月查询____________________________
    }else {
      startDate = `${userDate[0]}-${userDate[1]}-01`;
      // 当前年月
      if(currentDate[0] == userDate[0] && currentDate[1] == userDate[1]) {
        endDate = utils.formatDate(new Date(), 'yyyy-MM-dd');
      }else {
        endDate = utils.formatDate(new Date(userDate[0], userDate[1], 0), 'yyyy-MM-dd');
      }
    }
    // 
    // 
    // 发起请求
    this.request(startDate, endDate);
  },

  // 发起请求
  request(startDate, endDate) {
    wx.showLoading({
      title: '加载中...'
    })
    wx.cloud.callFunction({
      name: 'get_booking',
      data: {
        // 开始结束时间
        startDate,
        endDate,
        // 偏移量
        offset: 0,
        // 数据量
        limit: 0
      }
    })
    .then(res => {
      // 
      // 
      // 重置记录数据
      this.data.bookingdata = {
        zc: [],
        sr: []
      }
      // 重置支出收入总金额
      this.data.type.forEach(v => {
        v.total = 0;
      })
      // 重置颜色
      let c = {
        zc: [],
        sr: []
      }
      this.setData({
        type: this.data.type,
        bookingdata: this.data.bookingdata,
        colors: c
      })
      // 关闭加载提示
      wx.hideLoading();

      let obj = {
        zc: [],
        sr: []
      }
      // 遍历请求的数据
      res.result.data.forEach(v => {
        // 利用对象key的唯一性将所有数据先分为支出收入两大类
        obj[v.subbar.type].push(v);
      })
      // 遍历支出收入
      for(let key in obj) {
        let o = {};
        // 遍历处理好支出收入类型的数据
        obj[key].forEach((v, i) => {
          // 
          if(o[v.subtype.type] == undefined) {
            o[v.subtype.type] = {
              color: utils.createColor(),// 颜色
              icon: v.subtype.icon,// 图标
              percent: '',// 百分比
              title: v.subtype.title,// 标题
              type: v.subtype.type,// 类型
              key: v.subbar.type,// 类型
              total: Number(v.money),// 总价
              count: 1,// 笔数
              data: [v],// 数据
              name: v.subtype.title,// 饼图的标题
              value: Number(v.money),// 饼图的数据
              ids: v._id// 记录详情页的数据
            }
          }else {
            o[v.subtype.type].count++;
            o[v.subtype.type].total += Number(v.money);
            o[v.subtype.type].data.push(v);
            o[v.subtype.type].value += Number(v.money);// 饼图的数据
            o[v.subtype.type].ids += `-${v._id}`;// 记录详情页的数据
          }
        })
        for(let item in o) {
          this.data.bookingdata[key].push(o[item]);
          // 将颜色保存
          if(this.data.colors[key] == undefined) {
            this.data.colors[key] = [o[item].color];
          }else {
            this.data.colors[key].push(o[item].color);
          }
        }
      }
      // 统计总金额
      this.data.type.forEach((v, i) => {
        this.data.bookingdata[v.type].forEach(item => {
          this.data.type[i].total += item.total;
        })
        this.data.type[i].total = Number(this.data.type[i].total.toFixed(2));
      })
      // 统计百分比
      this.data.type.forEach(v => {
        this.data.bookingdata[v.type].forEach(v2 => {
          v2.percent = (v2.total / v.total * 100).toFixed(0) + '%';
          // v2.percent = v2.total / v.total * 100;
          // if(v2.percent < 1) {
          //   v2.percent = '1%';
          // }else {
          //   v2.percent = v2.percent.toFixed(0) + '%';
          // }
          // 处理饼图标题显示百分比
          v2.name = v2.name + v2.percent;
          // 格式化金额
          v2.total = utils.thousandth(v2.total);
        })
        // 格式化金额
        v.total = utils.thousandth(v.total);
      })
      // 
      // 
      this.setData({
        bookingdata: this.data.bookingdata,
        type: this.data.type
      })
      this.drawPie();
    })
    .catch(err => {
      
      wx.hideLoading();
    })
  },

  // 绘制饼图
  drawPie() {
    let color = this.data.colors[this.data.type[this.data.typeIndex].type];
    let data = this.data.bookingdata[this.data.type[this.data.typeIndex].type];
    var option = {
      // 标签背景
      backgroundColor: "#ffffff",
      // 饼图模块对应
      legend: {
        top: 'bottom',
        left: 'center'
      },
      series: [{
        label: {
          normal: {
            fontSize: 12
          }
        },
        // 图表模式为饼图
        type: 'pie',
        // center: ['50%', '50%'],
        // 大小
        radius: ['0', '50%'],
        // 颜色
        color,
        // 数据
        data
      }]
    };
    // // 清空画布
    // chartInstance.clear();
    chartInstance.setOption(option, true);
  },

  // 跳转到分类记录详情
  goToBookingDetails(e) {
    let ids = e.currentTarget.dataset.ids;
    let title = e.currentTarget.dataset.title;
    let type = e.currentTarget.dataset.type;
    if(type == 'zc') {
      type = '支出';
    }else {
      type = '收入';
    }
    wx.navigateTo({
      url: `../bookingDetails/bookingDetails?ids=${ids}&title=${title}&type=${type}`,
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      date:  utils.formatDate(new Date(), 'yyyy年'),
      selectDate:  utils.formatDate(new Date(), 'yyyy-MM-dd'),
      endDate: utils.formatDate(new Date(), 'yyyy-MM-dd')
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.setData({
      loading: false
    })
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    // 获取记录
    this.getBookingData();
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})